/* pages/menu/menu.wxss */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header-content {
    display: flex;
    flex-direction: column;
    position: relative;

    .search-content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 25rpx;
      box-sizing: border-box;

      .search {
        display: flex;
        align-items: center;
        width: 100%;
        background: rgb(255 255 255 / 65%);
        flex-direction: row;
        border-radius: 35rpx;
        border: 1px solid #e8e8e8;
        margin-bottom: 30rpx;

        .icon-small {
          padding: 0 10rpx;
          color: #fff;
          font-size: 40rpx;
        }

        input {
          flex: 1;
          font-size: 26rpx;
          height: 60rpx;
          color: #707171;
        }
      }
    }

    .line-bar {
      width: 100%;
      height: 10rpx;
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 10rpx 10rpx 0 0;
    }
  }

  .menu-content {
    flex: 1;

    .weui-tabs {
      height: calc(100% - 20rpx);

      .weui-tabs-bar__wrp {
        margin: 10rpx 0;

        .weui-tabs-bar__content {
          height: 58rpx;

          .weui-tabs-bar__item {
            padding: 0 24rpx;

            .weui-tabs-bar__title {
              padding-bottom: 15rpx;
            }
          }
        }
      }

      .weui-tabs-swiper {
        height: calc(100% - 58rpx);

        .tab-content {
          height: 100%;

          .tab-scroll {
            height: 100%;

            .tab-title {
              display: flex;
              align-items: center;
              margin-bottom: 40rpx;

              .title {
                font-size: 36rpx;
                color: #222222;
                position: relative;
                font-weight: 500;
                letter-spacing: 1rpx;
                position: relative;

                &::after {
                  content: '';
                  display: block;
                  width: 152rpx;
                  height: 18rpx;
                  border-radius: 8rpx;
                  background: linear-gradient(to right, #f6e6e3, #ef9994);
                  position: absolute;
                  bottom: 5rpx;
                  left: 0;
                  z-index: -1;
                }
              }
            }

            .star-content {
              padding: 30rpx 30rpx 0 30rpx;
              box-sizing: border-box;
              .star-list {
                display: flex;
                align-items: center;

                .star-item {
                  width: 25%;

                  .star-image {
                    width: 120rpx;
                    height: 120rpx;
                    margin: auto;

                    image {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }

                  .star-title {
                    text-align: center;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 28rpx;
                  }
                }
              }
            }
            .resource-content{
              padding: 30rpx 30rpx 0 30rpx;
              box-sizing: border-box;
              .resource-list{
                .resource-item{
                  display: flex;
                  margin-bottom: 65rpx;
                  .item-left{
                    width: 160rpx;
                    height: 160rpx;
                    image{
                      width: 100%;
                      height: 100%;
                      border-radius: 8rpx;
                    }
                  }
                  .item-right{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: calc(100% - 160rpx);
                    padding-left: 24rpx;
                    box-sizing: border-box;
                    position: relative;
                    .title{
                      color: #424242;
                      font-size: 32rpx;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                    .name{
                      color: #8E8E8E;
                      font-size: 30rpx;
                    }
                    .count{
                      display: flex;
                      align-items: center;
                      font-size: 26rpx;
                      color: #E94A59;
                      image{
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 10rpx;
                      }
                      .time{
                        color: #969696;
                        margin-left: 20rpx;
                      }
                    }
                    button{
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      background: #00B7C7;
                      height: 66rpx;
                      line-height: 66rpx;
                      border-radius: 10rpx;
                      width: 160rpx;
                      font-size: 28rpx;
                      letter-spacing: 2rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}